<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-bar">
      <input type="text" v-model="searchQuery" placeholder="按时间搜索:YYYY-MM-DD" class="search-input"/>
      <button class="search-button" @click="filterPurchaseRecords">搜索</button>
    </view>
	
	<view v-if="purchaseRecords.length === 0" style='display: flex;flex-direction: column;align-items: center;'>
	  <image src='../../Resources/Image/空空如也.png' style='width: 120px;height:120px;margin-bottom: 10px;'></image>
	  <div><span style="font-size: 20px; font-weight: bold; color: #b3b3b3">这里空空如也</span></div>
	</view>

    <!-- 进货记录列表 -->
    <view class="purchase-list">
      <view v-for="(record, index) in purchaseRecords" :key="index" class="purchase-card">
        <view class="card-header">
          <text class="product-id">订单ID:{{ record.id }}</text>
          <text class="transaction-time">{{ record.purchase_date }}</text>
        </view>
        <view class="card-content">
          <text class="purchase-id">进货编号: {{ record.order_sn }}</text>
          <text class="product-id">仓库 ID: {{ record.warehouse_id }}</text>
          <text class="supplier-id">供应商 SN: {{ record.supplier_no }}</text>
          <text class="supplier-name">供应商名称: {{ record.supplier_name }}</text>
          <text class="order-amount">订单金额: ¥{{ record.purchase_amount}}</text>
          <text class="order-type">订单类型: {{ record.purchase_type }}</text>
          <text class="payment-status">付款状态: {{ record.pay_type }}</text>
          <text class="transaction-time">交易时间: {{ record.purchase_date }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { config } from '../../config';
import { LoginState } from '../../util/LoginSate';
import { onPullDownRefresh , onReachBottom } from "@dcloudio/uni-app"

const purchaseRecords = ref([
  
]);

const AllpurchaseRecords = ref([])

//分页数据
let pageinfo = ref({
	page:1,
	size:3
})

//下拉刷新 触底加载
onPullDownRefresh(()=>{
	pageinfo.value.page = 1;
	AllpurchaseRecords.value = []
	purchaseRecords.value = []
	AllInfo()
	uni.stopPullDownRefresh()
})

onReachBottom(()=>{
	AllInfo()
})


onMounted(()=>{
	if(!LoginState()){
		uni.showToast({
		  title: '登录失效',
		  icon: 'error'
		});
		uni.redirectTo({
			url:"/pages/index/index"
		})
		return ;
	}
	AllInfo();
})

function AllInfo(){
	uni.request({
		url:`${config.baseURL}/OnBindHistory/CardInfo`,
		method:'POST',
		data:pageinfo.value,
		header: {
			'content-type': 'application/json' // 设置请求头为 JSON
		},
		success:(res)=>{
			if(res.data.data === 'error'){
				uni.showToast({
				  title: '数据库错误',
				  icon: 'error'
				});
			}
			else {
				let data = JSON.parse(res.data.data);
				purchaseRecords.value.push(...data)
				for(let i=0;i<purchaseRecords.value.length;i++){
					if(purchaseRecords.value[i].purchase_type === '1'){
						purchaseRecords.value[i].purchase_type = "采购进货";
					}
					else if(purchaseRecords.value[i].purchase_type === 'R'){
						purchaseRecords.value[i].purchase_type = "采购退货";
					}
					if(purchaseRecords.value[i].pay_type === 'Y'){
						purchaseRecords.value[i].pay_type = "已结算";
					}
					else if(purchaseRecords.value[i].pay_type === 'N'){
						purchaseRecords.value[i].pay_type = "未结算";
					}
					else if(purchaseRecords.value[i].pay_type === 'U'){
						purchaseRecords.value[i].pay_type = "部分结算";
					}
				}
				console.log("获取到后端数据"+JSON.stringify(purchaseRecords.value));
				AllpurchaseRecords.value = purchaseRecords.value
				pageinfo.value.page+=pageinfo.value.size
			}
		}
	})
}

const searchQuery = ref('');
const filteredPurchaseRecords = ref([...purchaseRecords.value]);

function filterPurchaseRecords() {
  if(searchQuery.value === ''){
	  purchaseRecords.value = AllpurchaseRecords.value
	  return ;
  }
  const searchedGoods = AllpurchaseRecords.value.filter(item => item.purchase_date === searchQuery.value);
  console.log("查询出数据"+JSON.stringify(searchedGoods))
  purchaseRecords.value = searchedGoods
}

function toggleCard(index) {
  const record = filteredPurchaseRecords.value[index];
  record.expanded = !record.expanded;
}
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f0f4f8;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.search-input {
  flex-grow: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #d4d6d9;
  margin-right: 10px;
}

.search-button {
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  height: 40px;
  font-size: 16px;
  padding: 0 20px;
}

.purchase-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.purchase-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.3s;
}

.purchase-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #e5e7eb;
}

.card-content {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background-color: #fafafa;
}

.product-id, .product-name, .transaction-time, .purchase-id, .supplier-id, .supplier-name, .order-amount, .order-type, .payment-status {
  margin: 5px 0;
}

</style>
